<template>
    <template v-if="user">
      <div style="display:grid; justify-content: center; align-items: center; height: auto; margin-top: 10%;">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="user?.avatarUrl"
        />
        <van-cell :value="user?.username" />
      </div>
      <van-cell title="修改信息" is-link to="/user/update" />
      <van-cell title="我创建的队伍" is-link to="/user/team/create" />
      <van-cell title="我加入的队伍" is-link to="/user/team/join" />
    </template>
    <van-button type="danger" block @click="logout" style="width: 60%;margin: 10% auto; margin-top: 10%">退出登录
    </van-button>
  </template>
  
  <script setup lang="ts">
  import {useRouter} from "vue-router";
  import {onMounted, ref} from "vue";
  import myAxios from "../plugins/myAxios.js";
  import { showFailToast, showSuccessToast } from "vant/lib/vant.es";
  import {getCurrentUser} from "../services/user";
  
  const user = ref();
  
  onMounted(async ()=>{
    user.value=await getCurrentUser();
  })
  
  const router = useRouter();
  
  const logout = () => {
    const res = myAxios.post('/user/logout?id='+user.value.id)
      console.log(res.data, '用户注销');
      console.log(res.code, '退出码');
      if (res.code === undefined  ) {
        showSuccessToast('注销成功！');
        // 跳转到之前的页面
        router.push({
          path: '/user/login'
        });
      } else {
        showFailToast('注销失败！');
      }
  }
  
  </script>
  
  <style scoped>

  </style>